<template>
  <div class="home-block section-2">
    <div class="cy-box">
      <div class="cy-title " :class="{'active': isStart}">{{ info.home_industry_title }}</div>
      <div class="cy-desc " :class="{'active': isStart}">{{ info.home_industry_titles }}</div>
    </div>
    <div class="cy-swiper-box" v-if="list.length > 3" :class="{'active': isStart}">
      <div class="cy-swiper swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in list" :key="index">
            <div class="cy-card hv-scale">  
              <img oncontextmenu="return false" :src="item.photo" alt="" class="photo fit-img">
              <div class="cy-card-inner">
                <div class="title">{{ item.title }}</div>
                <div class="desc">{{ item.titles }}</div>
                <a :href="item.url || 'javascript:;'" class="btn flex-center hv-opacity">
                  <span class="label">{{ item.search_title }}</span>
                  <i class="iconfont icon-arrow"></i>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cy-prev-btn flex-center">
        <i class="iconfont icon-arrow_left"></i>
      </div>
      <div class="cy-next-btn flex-center">
        <i class="iconfont icon-arrow"></i>
      </div>
    </div>
    <div class="cy-swiper-box" v-else :class="{'active': isStart}">
      <div class="cy-list flex-center">
        <div class="cy-card" v-for="(item, index) in list" :key="index">
          <img oncontextmenu="return false" :src="item.photo" alt="" class="photo fit-img">
          <div class="cy-card-inner">
            <div class="title">{{ item.title }}</div>
            <div class="desc">{{ item.titles }}</div>
            <a :href="item.url || 'javascript:;'" class="btn flex-center ">
              <span class="label">{{ item.search_title }}</span>
              <i class="iconfont icon-arrow"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { getIndustryList } from '@/api/home'
import Swiper from 'swiper'
import { Mousewheel, Navigation } from 'swiper/modules'
import 'swiper/scss'
import 'swiper/scss/navigation'

const list = ref([]);
const isStart = ref(false)
let cySwiper

const prop = defineProps({
  info: {
    type: Object
  },
  cur: {
    type: Number,
  }
});

onMounted(() => {
  loadData();  
  // wow.init()
});

watch(() => prop.cur, (newValue, oldValue) => {
  if (newValue === 1) {
    isStart.value = true
  } else {
    isStart.value = false
  }
}, { immdiate: true })

const loadData = () => {
  getIndustryList().then(res => {
    list.value = res.data;
    if (list.value.length > 3) {
      console.log(999)
      setTimeout(() => {
        initSwiper()
      }, 300)
    }
  })
};

const initSwiper = () => {
  cySwiper = new Swiper('.cy-swiper', {
    slidesPerView: 'auto',
    spaceBetween: 30,
    slidesOffsetAfter: 80,
    slidesOffsetBefore: 80,
    modules: [Mousewheel, Navigation],
    mousewheel: false,
    navigation: {
      nextEl: '.cy-next-btn',
      prevEl: '.cy-prev-btn',
    },
    on: {
      slideChange: function () {
      },
    },
  });
}

</script>

<style lang="scss">
.cy-box {
  padding-top: 5.9375rem /* 95/16 */;
  text-align: center;
  .cy-title {
    font-size: 2.8125rem /* 45/16 */;
    line-height: 1;
    font-weight: 500;
    color: #000000;
    opacity: 0;
    transition: all 1s ease-in-out;
    transition-delay: .4s;
    transform: translateY(40px);
    &.active {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .cy-desc {
    margin-top: 1.5625rem /* 25/16 */;
    font-size: 1.0625rem /* 17/16 */;
    line-height: 1;
    color: #595757;
    opacity: 0;
    transition: all 1s ease-in-out;
    transition-delay: .6s;
    transform: translateY(20px);
    &.active {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
.section-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  &:hover {
    .cy-next-btn, .cy-prev-btn {
      opacity: 1;
    }
  }
}
.cy-next-btn, .cy-prev-btn {
  width: 3.125rem /* 50/16 */;
  height: 3.125rem /* 50/16 */;
  border-radius: 50%;
  background-color: rgba(0,0,0,.4);
  position: absolute;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  &:hover {
    .iconfont {
      color: #FFFFFF;
    }
    background: #E50012
  }
  .iconfont {
    font-size: 1.125rem /* 18/16 */;
    color: #FFFFFF;
  }
}
.cy-next-btn {
  right: 5rem /* 80/16 */;
}
.cy-prev-btn {
  left: 5rem /* 80/16 */;
}
.cy-swiper-box {
  margin-top: 3.4375rem /* 55/16 */;
  width: 100%;
  height: 44.0625rem /* 705/16 */;
  position: relative;
  opacity: 0;
  transition: all 1s ease-in-out;
  transition-delay: .8s;
  transform: translateY(20px);
  &.active {
    opacity: 1;
    transform: translateY(0);
  }
  .swiper-slide {
    width: 33.4375rem /* 535/16 */;
    height: 44.0625rem /* 705/16 */;
    // &:first-child {
    //   margin-left: 5rem /* 80/16 */;
    // }
    // &:last-child {
    //   margin-right: 5rem /* 80/16 */;
    // }
  }
}
.cy-card {
  width: 33.4375rem /* 535/16 */;
  height: 44.0625rem /* 705/16 */;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  max-height: calc(100vh - 20rem);
  .cy-card-inner {
    position: absolute;
    padding: 8.1875rem /* 131/16 */ 0 3.125rem /* 50/16 */;
    width: 100%;
    left: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(89, 87, 87, 0) 0%, rgba(0, 0, 0, 0.4) 43%);
    .title {
      font-size: 1.75rem /* 28/16 */;
      line-height: 1;
      letter-spacing: .02em;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
    }
    .desc {
      margin-top: 1.375rem /* 22/16 */;
      font-size: 1rem /* 16/16 */;
      line-height: 1;
      color: rgba(255,255,255,.9);
      text-align: center;
    }
    .btn {
      margin: 2.5rem /* 40/16 */ auto 0;
      width: 8.75rem /* 140/16 */;
      height: 3rem /* 48/16 */;
      border-radius: 2px;
      border: 1px solid #FFFFFF;
      &:hover {
        background: #E50012;
        border-color: #E50012;
      }
      .label {
        font-size: .875rem /* 14/16 */;
        font-weight: 500;
        color: #FFFFFF;
        line-height: 1;
      }
      .iconfont {
        font-size: .875rem /* 14/16 */;
        line-height: 1;
        color: #FFFFFF;
        margin-left: .125rem /* 2/16 */;
      }
    }
  }

}
.cy-list .cy-card {
  margin: 0 .9375rem /* 15/16 */;
}
</style>